<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的事件 和 dom 操作 </title>
    <!--
        dom 操作  操作就是 修改节点元素的 样式、属性
       dom操作不需要掌握 了解
          Vue的 双向绑定 更加nb 需要熟练掌握
    -->
    <style>

        div{
            background-color: deepskyblue;
            height: 200px;
            width: 200px;
        }

    </style>
</head>
<body>
<!--
    onclick  点击事件
       在标签中添加事件
            点击我触发 事件对应的函数
            执行js中定义的函数
-->
<div onclick="demo01()">
    div
</div>
<script>

    // function demo01(){
    //     alert('你点我干嘛...')
    // }

    //演示dom操作
    function demo01(){
        //1、拿到元素节
        // document.getElementById("")
        let divNode = document.querySelector("div");

        //需改属性 修改样式
        divNode.innerHTML = "今天购买彩票，没人中300块";
        divNode.style.backgroundColor = "yellow";
        divNode.style.fontSize = "30px";

        //这个操作 很麻烦  后期都是使用vue 进行操作
    }

</script>


</body>
</html>